<template>
  <div>
    <div style="width: 100%">
      <!-- 基本信息 -->

      <!-- 数据录入 -->
      <a-card title="数据录入" bordered="{false}" style="margin-top: 10px; width: 100%">
        <a-form layout="vertical">
          <div style="display: flex; flex-wrap: wrap; gap: 10px">
            <a-form-item label="企业名称" style="flex: 1 1 30%">
              <a-input
                v-model="companyInfo.name"
                placeholder="请输入企业名称"
                style="width: 270px"
              />
            </a-form-item>
            <a-form-item label="企业描述" style="flex: 1 1 30%">
              <a-input
                v-model="companyInfo.description"
                placeholder="请输入企业描述"
                style="width: 270px"
              />
            </a-form-item>
            <a-form-item label="排放源类型" style="flex: 1 1 30%">
              <a-select
                v-model="scope1Data.sourceType"
                placeholder="请选择排放源类型"
                style="width: 270px"
              >
                <a-select-option value="燃料燃烧">燃料燃烧</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="使用量 (m³)" style="flex: 1 1 30%">
              <a-input
                v-model="scope1Data.usage"
                placeholder="请输入使用量"
                style="width: 270px"
              />
            </a-form-item>
            <a-form-item label="排放因子 (kg CO2e/m³)" style="flex: 1 1 30%">
              <a-input
                v-model="scope1Data.emissionFactor"
                placeholder="请输入排放因子"
                style="width: 270px"
              />
            </a-form-item>
          </div>
        </a-form>

        <!-- 间接能源排放（Scope 2） -->
        <a-form layout="vertical">
          <div style="display: flex; flex-wrap: wrap; gap: 10px">
            <a-form-item label="能源类型" style="flex: 1 1 30%">
              <a-select
                v-model="scope2Data.energyType"
                placeholder="请选择能源类型"
                style="width: 270px"
              >
                <a-select-option value="电力">电力</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="使用总量" style="flex: 1 1 30%">
              <a-input
                v-model="scope2Data.usage"
                placeholder="请输入使用量"
                style="width: 270px"
              />
            </a-form-item>
            <a-form-item label="排放因子" style="flex: 1 1 30%">
              <a-input
                v-model="scope2Data.emissionFactor"
                placeholder="请输入排放因子"
                style="width: 270px"
              />
            </a-form-item>
          </div>
        </a-form>

        <!-- 生产工艺 -->
        <h3 style="margin-top: 10px">生产工艺</h3>
        <a-form layout="vertical">
          <div style="display: flex; flex-wrap: wrap; gap: 10px">
            <a-form-item label="钢铁用量" style="flex: 1 1 30%">
              <a-input
                v-model="manufacturingData.steelUsage"
                placeholder="请输入钢铁使用量"
                style="width: 270px"
              />
            </a-form-item>
            <a-form-item label="排放因子" style="flex: 1 1 30%">
              <a-input
                v-model="manufacturingData.steelEmissionFactor"
                placeholder="请输入排放因子"
                style="width: 270px"
              />
            </a-form-item>
            <a-form-item label="铝使用量" style="flex: 1 1 30%">
              <a-input
                v-model="manufacturingData.aluminumUsage"
                placeholder="请输入铝使用量"
                style="width: 270px"
              />
            </a-form-item>
            <a-form-item label="铝排放因子" style="flex: 1 1 30%">
              <a-input
                v-model="manufacturingData.aluminumEmissionFactor"
                placeholder="请输入排放因子"
                style="width: 270px"
              />
            </a-form-item>
          </div>
        </a-form>

        <!-- 物流运输 -->
        <h3 style="margin-top: 10px">物流运输</h3>
        <a-form layout="vertical">
          <div style="display: flex; flex-wrap: wrap; gap: 10px">
            <a-form-item label="车运输量" style="flex: 1 1 30%">
              <a-input
                v-model="logisticsData.truckDistance"
                placeholder="请输入卡车运输量"
                style="width: 270px"
              />
            </a-form-item>
            <a-form-item label="排放因子" style="flex: 1 1 30%">
              <a-input
                v-model="logisticsData.emissionFactor"
                placeholder="请输入排放因子"
                style="width: 270px"
              />
            </a-form-item>
          </div>
        </a-form>

        <!-- 办公活动 -->
        <h3 style="margin-top: 10px">办公活动</h3>
        <a-form layout="vertical">
          <div style="display: flex; flex-wrap: wrap; gap: 10px">
            <a-form-item label="办公用量" style="flex: 1 1 30%">
              <a-input
                v-model="officeData.electricityUsage"
                placeholder="请输入办公电力使用量"
                style="width: 270px"
              />
            </a-form-item>
            <a-form-item label="排放因子" style="flex: 1 1 30%">
              <a-input
                v-model="officeData.emissionFactor"
                placeholder="请输入排放因子"
                style="width: 270px"
              />
            </a-form-item>
            <a-form-item label="通勤距离" style="flex: 1 1 30%">
              <a-input
                v-model="officeData.commuteDistance"
                placeholder="请输入员工通勤距离"
                style="width: 270px"
              />
            </a-form-item>
            <a-form-item label="燃油效率 (L/100km)" style="flex: 1 1 30%">
              <a-input
                v-model="officeData.fuelEfficiency"
                placeholder="请输入燃油效率"
                style="width: 270px"
              />
            </a-form-item>
            <a-form-item label="汽油排放因子 (kg CO2e/L)" style="flex: 1 1 30%">
              <a-input
                v-model="officeData.gasEmissionFactor"
                placeholder="请输入排放因子"
                style="width: 270px"
              />
            </a-form-item>
          </div>
        </a-form>

        <!-- 废弃处理 -->
        <h3 style="margin-top: 10px">废弃处理</h3>
        <a-form layout="vertical">
          <div style="display: flex; flex-wrap: wrap; gap: 10px">
            <a-form-item label="处理方式" style="flex: 1 1 30%">
              <a-select
                v-model="disposalData.method"
                placeholder="请选择处理方式"
                style="width: 270px"
              >
                <a-select-option value="回收">回收</a-select-option>
                <a-select-option value="填埋">填埋</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="处理量 (kg)" style="flex: 1 1 30%">
              <a-input
                v-model="disposalData.amount"
                placeholder="请输入处理量"
                style="width: 270px"
              />
            </a-form-item>
            <a-form-item label="排放因子 (kg CO2e/kg)" style="flex: 1 1 30%">
              <a-input
                v-model="disposalData.emissionFactor"
                placeholder="请输入排放因子"
                style="width: 270px"
              />
            </a-form-item>
          </div>
        </a-form>

        <!-- 其他间接排放（Scope 3） -->
        <h3 style="margin-top: 10px">其他间接排放（Scope 3）</h3>
        <a-form layout="vertical">
          <div style="display: flex; flex-wrap: wrap; gap: 10px">
            <a-form-item label="采购物品" style="flex: 1 1 30%">
              <a-input
                v-model="scope3Data.purchasedGoods"
                placeholder="请输入采购物品"
                style="width: 270px"
              />
            </a-form-item>
            <a-form-item label="排放因子 (kg CO2e/单位)">
              <a-input
                v-model="scope3Data.emissionFactor"
                placeholder="请输入排放因子"
                style="width: 270px"
              />
            </a-form-item>
          </div>
        </a-form>

        <a-form-item>
          <a-button type="primary" @click="submitData">提交数据</a-button>
        </a-form-item>
      </a-card>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";

const companyInfo = ref({ name: "", description: "" });
const scope1Data = ref({ sourceType: "", usage: "", emissionFactor: "", footprint: 0 });
const scope2Data = ref({ energyType: "", usage: "", emissionFactor: "", footprint: 0 });
const manufacturingData = ref({
  steelUsage: "",
  steelEmissionFactor: "",
  aluminumUsage: "",
  aluminumEmissionFactor: "",
});
const logisticsData = ref({ truckDistance: "", emissionFactor: "" });
const officeData = ref({
  electricityUsage: "",
  emissionFactor: "",
  commuteDistance: "",
  fuelEfficiency: "",
  gasEmissionFactor: "",
});
const disposalData = ref({ method: "", amount: "", emissionFactor: "" });
const scope3Data = ref({ upstreamEmissions: "", downstreamEmissions: "" });

const calculated = ref(false);
const totalCarbonFootprint = ref(0);

function calculateCarbonFootprint() {
  // 计算逻辑（示例）
  calculated.value = true;
  totalCarbonFootprint.value = 1234; // 假设的计算结果
}
</script>

<style scoped>
/* 样式调整 */
</style>
